<style lang="less">
    @import "menuManage.less";
</style>
<template>
    <div class="search">
        <Card>
            <Row class="operation">
                <Button @click="addRootMenu" icon="md-add" type="primary">添加一级菜单</Button>
                <Button @click="addMenu" icon="md-add" type="primary" v-if="!(menuForm.id == '' ||menuForm.id == null)">
                    添加菜单
                </Button>
                <Button @click="addArea" icon="md-add" type="primary"
                        v-if="!(menuForm.id == '' ||menuForm.id == null)">添加操作区域
                </Button>
                <Button @click="addButton" icon="md-add" type="primary"
                        v-if="!(menuForm.id == '' ||menuForm.id == null)">添加操作权限
                </Button>
                <Button @click="delAll" icon="md-trash" type="error">批量删除</Button>
                <Dropdown @on-click="handleDropdown">
                    <Button>更多操作
                        <Icon type="md-arrow-dropdown"></Icon>
                    </Button>
                    <DropdownMenu slot="list">
                        <DropdownItem name="refresh">刷新</DropdownItem>
                        <DropdownItem name="expandOne">仅显示一级</DropdownItem>
                        <DropdownItem name="expandTwo">仅展开两级</DropdownItem>
                        <DropdownItem name="expandAll">展开所有</DropdownItem>
                    </DropdownMenu>
                </Dropdown>
            </Row>
            <Row class="code-row-bg" justify="start" type="flex">
                <Col span="8">
                    <Alert show-icon>
                        当前选择编辑：
                        <span class="select-title">{{editTitle}}</span>
                        <a @click="cancelEdit" class="select-clear" v-if="menuForm.id">取消选择</a>
                    </Alert>
                    <Input
                        @on-change="search"
                        clearable
                        placeholder="输入菜单名搜索"
                        suffix="ios-search"
                        v-model="searchKey"
                    />
                    <div class="tree-bar">
                        <Tree
                            :data="data"
                            @on-check-change="changeSelect"
                            @on-select-change="selectTree"
                            ref="tree"
                            show-checkbox
                        ></Tree>
                    </div>
                    <Spin fix size="large" v-if="loading"></Spin>
                </Col>
                <Col span="9" style="margin-left: 20px" v-show="editTitle!=''">
                    <Form :label-width="85" :model="menuForm" :rules="menuFormValidate" ref="menuForm">
                        <FormItem label="类型" prop="type">
                            <RadioGroup v-model="menuForm.type">
                                <Radio :disabled="menuForm.type!=0" :label="0">
                                    <Icon size="16" style="margin-bottom:3px;" type="ios-list-box-outline"></Icon>
                                    <span>页面菜单</span>
                                </Radio>
                                <Radio :disabled="menuForm.type!=2" :label="2">
                                    <Icon size="16" style="margin-bottom:3px;" type="md-card"></Icon>
                                    <span>页面区域</span>
                                </Radio>
                                <Radio :disabled="menuForm.type!=1" :label="1">
                                    <Icon size="16" style="margin-bottom:3px;" type="md-log-in"></Icon>
                                    <span>操作权限</span>
                                </Radio>
                            </RadioGroup>
                        </FormItem>
                        <FormItem label="名称" prop="title" v-if="menuForm.type===0">
                            <Input style="width:400px" v-model="menuForm.title"/>
                        </FormItem>
                        <FormItem label="名称" prop="title" v-if="menuForm.type===1">
                            <Tooltip content="操作权限名称不得重复" placement="right">
                                <Input style="width:400px" v-model="menuForm.title"/>
                            </Tooltip>
                        </FormItem>
                        <FormItem label="名称" prop="title" v-if="menuForm.type===2">
                            <Tooltip content="操作区域名称不得重复" placement="right">
                                <Input style="width:400px" v-model="menuForm.title"/>
                            </Tooltip>
                        </FormItem>
                        <FormItem label="描述" prop="description">
                            <Input style="width:400px" v-model="menuForm.description"/>
                        </FormItem>
                        <FormItem label="访问路径" prop="path" v-if="menuForm.type===0">
                            <Tooltip
                                :max-width="230"
                                content="访问路径"
                                placement="right"
                                transfer
                            >
                                <Input style="width:400px" v-model="menuForm.path"/>
                            </Tooltip>
                        </FormItem>
                        <FormItem label="权限标记" prop="permissions" v-if="menuForm.type===1||menuForm.type===2">
                            <Tooltip
                                :max-width="230"
                                content="多个用逗号分隔"
                                placement="right"
                                transfer
                            >
                                <Input style="width:400px" v-model="menuForm.permissions"/>
                            </Tooltip>
                        </FormItem>
                        <div v-if="menuForm.type===0">
                            <FormItem label="路由英文名" prop="name">
                                <Tooltip content="需唯一" placement="right" trigger="focus">
                                    <Input style="width:400px" :disabled="menuForm.name!==''" v-model="menuForm.name"/>
                                </Tooltip>
                            </FormItem>
                            <FormItem label="图标" prop="icon">
                                <Input
                                    :icon="menuForm.icon"
                                    @on-focus="showEditIcon(0)"
                                    placeholder="点击选择图标"
                                    style="width:400px"
                                    v-model="menuForm.icon"
                                />
                            </FormItem>
                            <FormItem label="前端组件" prop="component">
                                <Input style="width:400px" v-model="menuForm.component"/>
                            </FormItem>
                            <FormItem label="组件参数" prop="params">
                                <Input style="width:400px" v-model="menuForm.params"/>
                            </FormItem>
                            <FormItem label="http网页链接" prop="url">
                                <Tooltip content="前端组件需为 iframe/iframe 时生效" placement="right">
                                    <Input placeholder="http://" style="width:400px" v-model="menuForm.url"/>
                                </Tooltip>
                            </FormItem>
                        </div>
                        <FormItem label="排序值" prop="sortOrder">
                            <InputNumber :max="1000" :min="0" v-model="menuForm.sortOrder"></InputNumber>
                            <span style="margin-left:5px">值越小越靠前，支持小数</span>
                        </FormItem>
                        <FormItem v-if="menuForm.type===0" label="是否基础平台" prop="status">
                            <Select style="width:100px" v-model="menuForm.basic">
                                <Option :key="item.value" :value="item.value" v-for="item in basic">{{ item.label }}
                                </Option>
                            </Select>
                        </FormItem>
                        <FormItem label="是否启用" prop="status">
                            <Select style="width:100px" v-model="menuForm.status">
                                <Option :key="item.value" :value="item.value" v-for="item in yesorno">{{ item.label }}
                                </Option>
                            </Select>
                        </FormItem>
                        <Form-item>
                            <Button
                                :loading="submitLoading"
                                @click="submitEdit"
                                icon="ios-create-outline"
                                style="margin-right:5px"
                                type="primary"
                            >修改并保存
                            </Button>
<!--                            <Button @click="handleReset">重置</Button>-->
                        </Form-item>
                    </Form>
                </Col>
            </Row>
        </Card>

        <Modal
            :mask-closable="false"
            :styles="{top: '100px'}"
            :title="modalTitle"
            :width="500"
            @on-visible-change="resetAddForm"
            draggable
            v-model="menuModalVisible"
        >
            <Form :label-width="85" :model="menuFormAdd" :rules="menuFormValidate" ref="menuFormAdd">
                <div v-if="showParent">
                    <FormItem label="上级节点：">{{parentTitle}}</FormItem>
                </div>
                <FormItem label="类型" prop="type">
                    <RadioGroup v-model="menuFormAdd.type">
                        <Radio :disabled="menuFormAdd.type!=0" :label="0">
                            <Icon size="16" style="margin-bottom:3px;" type="ios-list-box-outline"></Icon>
                            <span>页面菜单</span>
                        </Radio>
                        <Radio :disabled="menuFormAdd.type!=2" :label="2">
                            <Icon size="16" style="margin-bottom:3px;" type="md-card"></Icon>
                            <span>页面区域</span>
                        </Radio>
                        <Radio :disabled="menuFormAdd.type!=1" :label="1">
                            <Icon size="16" style="margin-bottom:3px;" type="md-log-in"></Icon>
                            <span>操作权限</span>
                        </Radio>

                    </RadioGroup>
                </FormItem>
                <FormItem label="名称" prop="title" v-if="menuFormAdd.type===0">
                    <Input style="width: 380px" v-model="menuFormAdd.title"/>
                </FormItem>
                <FormItem label="名称" prop="title" v-if="menuFormAdd.type===1">
                    <Tooltip content="操作权限名称不得重复" placement="right" trigger="focus">
                        <Input style="width: 380px" v-model="menuFormAdd.title"/>
                    </Tooltip>
                </FormItem>
                <FormItem label="名称" prop="title" v-if="menuFormAdd.type===2">
                    <Tooltip content="操作区域名称不得重复" placement="right" trigger="focus">
                        <Input style="width: 380px" v-model="menuFormAdd.title"/>
                    </Tooltip>
                </FormItem>
                <FormItem label="描述" prop="description">
                    <Input v-model="menuFormAdd.description"/>
                </FormItem>
                <FormItem label="路径" prop="path" v-if="menuFormAdd.type===0">

                    <Tooltip
                        :max-width="230"
                        content="访问路径"
                        placement="right"
                        transfer
                    >
                        <Input style="width: 380px" v-model="menuFormAdd.path"/>
                    </Tooltip>
                </FormItem>
                <FormItem label="权限标记" prop="permissions" v-if="menuFormAdd.type===1||menuFormAdd.type===2">
                    <Tooltip
                        :max-width="230"
                        content="多个用逗号分隔"
                        placement="right"
                        transfer
                    >
                        <Input style="width:380px" v-model="menuFormAdd.permissions"/>
                    </Tooltip>
                </FormItem>
                <div v-if="menuFormAdd.type===0">
                    <FormItem label="路由英文名" prop="name">
                        <Tooltip content="需唯一" placement="right" trigger="focus">
                            <Input style="width: 380px" v-model="menuFormAdd.name"/>
                        </Tooltip>
                    </FormItem>
                    <FormItem label="图标" prop="icon">
                        <Input
                            :icon="menuFormAdd.icon"
                            @on-focus="showEditIcon(1)"
                            placeholder="点击选择图标"
                            v-model="menuFormAdd.icon"
                        />
                    </FormItem>
                    <FormItem label="前端组件" prop="component">
                        <Input v-model="menuFormAdd.component"/>
                    </FormItem>
                    <FormItem label="组件参数" prop="params">
                        <Input style="width:400px" v-model="menuFormAdd.params"/>
                    </FormItem>
                    <FormItem label="http网页链接" prop="url">
                        <Tooltip content="前端组件需为 iframe/iframe 时生效" placement="right">
                            <Input placeholder="http://" style="width:380px" v-model="menuFormAdd.url"/>
                        </Tooltip>
                    </FormItem>
                </div>
                <FormItem label="排序值" prop="sortOrder">
                    <InputNumber :max="1000" :min="0" v-model="menuFormAdd.sortOrder"></InputNumber>
                    <span style="margin-left:5px">值越小越靠前，支持小数</span>
                </FormItem>
                <FormItem v-if="menuFormAdd.type===0" label="是否基础平台" prop="status">
                    <Select style="width:100px" v-model="menuFormAdd.basic">
                        <Option :key="item.value" :value="item.value" v-for="item in basic">{{ item.label }}
                        </Option>
                    </Select>
                </FormItem>
                <FormItem label="是否启用" prop="status">
                    <Select style="width:100px" v-model="menuFormAdd.status">
                        <Option :key="item.value" :value="item.value" v-for="item in yesorno">{{ item.label }}</Option>
                    </Select>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button @click="cancelAdd" type="text">取消</Button>
                <Button :loading="submitLoading" @click="submitAdd" type="primary">提交</Button>
            </div>
        </Modal>
        <Modal :styles="{top: '80px'}" :width="800" footer-hide title="选择图标" v-model="iconModalVisible">
            <icon-choose @on-select="handleSelectIcon"></icon-choose>
        </Modal>
    </div>
</template>

<script>
    import {
        addPermission,
        deletePermission,
        editPermission,
        getAllPermissionList,
        searchPermission
    } from '@/projects/basic/api/admin/menu';
    import IconChoose from "_c/icon-choose/icon-choose";
    import util from "@/libs/util.js";

    export default {
        name: "menu-manage",
        components: {
            IconChoose
        },
        data() {
            return {
                loading: true,
                expandLevel: 1,
                menuModalVisible: false,
                iconModalVisible: false,
                selectList: [],
                selectCount: 0,
                showParent: false,
                searchKey: "",
                parentTitle: "",
                isButtonAdd: false,
                isMenuAdd: false,
                isMenu: false,
                isButton: false,
                editTitle: "",
                modalTitle: "",
                yesorno: [{
                    value: '1',
                    label: '启用'
                }, {
                    value: '0',
                    label: '禁用'
                }],
                basic: [{
                    value: 'N',
                    label: '否'
                }, {
                    value: 'Y',
                    label: '是'
                }],
                menuForm: {
                    id: "",
                    parentId: 0,
                    permissions: "",
                    type: 0,
                    sortOrder: 0,
                    level: null,
                    status: '0',
                    basic:'N',
                    url: "",
                    icon: "md-open",
                    params:"{}"
                },
                menuFormAdd: {
                    permissions: "",
                    icon: "md-open",
                    sortOrder: 0,
                    basic:'N',
                    params:'{}'
                },
                menuFormValidate: {
                    title: [{required: true, message: "名称不能为空", trigger: "blur"}],
                    name: [{required: true, message: "路由英文名不能为空", trigger: "blur"}],
                    icon: [{required: true, message: "图标不能为空", trigger: "blur"}],
                    path: [{required: true, message: "请求路径不能为空", trigger: "blur"}],
                    component: [
                        {required: true, message: "前端组件不能为空", trigger: "blur"}
                    ]
                },
                submitLoading: false,
                data: [],
                iconType: 0
            };
        },
        methods: {
            resetAddForm() {
                this.$refs.menuFormAdd.resetFields()
            },
            init() {
                this.getAllList();
            },
            showEditIcon(v) {
                this.iconType = v;
                this.iconModalVisible = true;
            },
            handleSelectIcon(v) {
                if (this.iconType == 0) {
                    this.menuForm.icon = v;
                } else {
                    this.menuFormAdd.icon = v;
                }
                this.$refs.menuForm.validate()
                this.iconModalVisible = false;
            },
            handleDropdown(name) {
                if (name === "expandOne") {
                    this.expandLevel = 1;
                    this.getAllList();
                } else if (name === "expandTwo") {
                    this.expandLevel = 2;
                    this.getAllList();
                } else if (name === "expandAll") {
                    this.expandLevel = 3;
                    this.getAllList();
                } else if (name === "refresh") {
                    this.getAllList();
                }
            },
            getAllList() {
                this.loading = true;
                getAllPermissionList().then(res => {
                    this.loading = false;
                    if (res.code === "0000") {
                        // 仅展开指定级数 默认一级
                        let expandLevel = this.expandLevel;
                        res.data.forEach(function (e) {
                            if (expandLevel === 1) {
                                if (e.level === 1) {
                                    e.expand = false;
                                }
                                if (e.children && e.children.length > 0) {
                                    e.children.forEach(function (c) {
                                        if (c.level === 2) {
                                            c.expand = false;
                                        }
                                    });
                                }
                            } else {
                                if (e.children && e.children.length > 0) {
                                    e.children.forEach(function (c) {
                                        if (expandLevel === 2) {
                                            if (c.level === 2) {
                                                c.expand = false;
                                            }
                                        }
                                    });
                                }
                            }
                        });
                        this.data = res.data;
                    }
                });
            },
            search() {
                if (this.searchKey) {
                    this.loading = true;
                    searchPermission({title: this.searchKey}).then(res => {
                        this.loading = false;
                        if (res.code === "0000") {
                            this.data = res.data;
                        }
                    });
                } else {
                    this.getAllList();
                }
            },
            selectTree(v) {
                this.$refs.menuForm.resetFields();
                if (v.length > 0) {
                    if (Number(v[0].type) === 0) {
                        this.isButton = false;
                        this.isMenu = true;
                    } else {
                        this.isButton = true;
                        this.isMenu = false;
                    }
                    this.menuForm.editStatus = true;
                    for (let attr in v[0]) {
                        if (v[0][attr] === null) {
                            v[0][attr] = "";
                        }
                    }
                    let str = JSON.stringify(v[0]);
                    let menu = JSON.parse(str);
                    delete menu.children;
                    this.menuForm = menu;
                    this.editTitle = menu.title;
                } else {
                    this.cancelEdit();
                }
            },
            cancelEdit() {
                let data = this.$refs.tree.getSelectedNodes()[0];
                if (data) {
                    data.selected = false;
                }
                this.isMenu = false;
                this.isButton = false;
                this.$refs.menuForm.resetFields();
                this.menuForm.id='';
                this.menuForm.params="{}";
                this.editTitle = "";
            },
            cancelAdd() {
                this.menuModalVisible = false;
            },
            handleReset() {
                let type = this.menuForm.type;
                this.$refs.menuForm.resetFields();
                this.menuForm.editStatus = false;
                this.menuForm.type = type;
            },
            submitEdit() {
                this.$refs.menuForm.validate(valid => {
                    if (valid) {
                        if (!this.menuForm.id) {
                            this.$Message.warning("请先点击选择要修改的菜单节点");
                            return;
                        }
                        this.submitLoading = true;
                        if (this.menuForm.sortOrder === null) {
                            this.menuForm.sortOrder = 0;
                        }
                        if (this.menuForm.permissions === null) {
                            this.menuForm.permissions = "";
                        }
                        if (!this.menuForm.parentId || this.menuForm.parentId === '') {
                            this.menuForm.parentId = 0;
                        }
                        if (this.menuForm.type == 1) {
                            this.menuForm.name = "";
                            this.menuForm.icon = "";
                            this.menuForm.component = "";
                            this.menuForm.path = "";
                            this.menuForm.params="{}";
                        }
                        editPermission(this.menuForm).then(res => {
                            this.submitLoading = false;
                            if (res.code === "0000") {
                                this.$Message.success("编辑成功");
                                util.initSystem(this);
                                this.init();
                                this.menuModalVisible = false;
                            }
                        }).catch(() => {
                            this.submitLoading = false;
                        });
                    }
                });
            },
            submitAdd() {
                this.$refs.menuFormAdd.validate(valid => {
                    if (valid) {
                        this.submitLoading = true;
                        if (this.menuFormAdd.sortOrder === null) {
                            this.menuFormAdd.sortOrder = 0;
                        }
                        if (this.menuFormAdd.permissions === null) {
                            this.menuFormAdd.permissions = "";
                        }
                        if (this.menuFormAdd.type == 1) {
                            this.menuFormAdd.name = "";
                            this.menuFormAdd.icon = "";
                            this.menuFormAdd.component = "";
                            this.menuFormAdd.path = "";
                            this.menuForm.params="{}";
                        }
                        addPermission(this.menuFormAdd).then(res => {
                            this.submitLoading = false;
                            if (res.code === "0000") {
                                this.$Message.success("添加成功");
                                util.initSystem(this);
                                this.init();
                                this.menuModalVisible = false;
                            }
                        }).catch(() => {
                            this.submitLoading = false;
                        });
                    }
                });
            },
            addMenu() {
                if (this.menuForm.id == "" || this.menuForm.id == null) {
                    this.$Message.warning("请先点击选择一个菜单权限节点");
                    return;
                }
                this.parentTitle = this.menuForm.title;
                this.modalTitle = "添加菜单权限(可拖动)";
                this.showParent = true;
                if (this.menuForm.type !== 0) {
                    this.$Modal.warning({
                        title: "抱歉,不能添加",
                        content: "按钮不能添加子节点"
                    });
                    return;
                }
                this.isMenuAdd = true;
                this.isButtonAdd = false;
                this.menuFormAdd = {
                    type: 0,
                    parentId: this.menuForm.id,
                    level: Number(this.menuForm.level) + 1,
                    sortOrder: 0,
                    permissions: "",
                    status: '1',
                    icon: "md-open",
                    basic:'N',
                    params:'{}'
                };
                this.menuModalVisible = true;
            },
            addArea() {
                if (this.menuForm.id == "" || this.menuForm.id == null) {
                    this.$Message.warning("请先点击选择一个菜单权限节点");
                    return;
                }
                this.parentTitle = this.menuForm.title;
                this.modalTitle = "添加区域(可拖动)";
                this.showParent = true;
                if (this.menuForm.type !== 0) {
                    this.$Modal.warning({
                        title: "抱歉,不能添加",
                        content: "区域只能加在页面下"
                    });
                    return;
                }
                this.isMenuAdd = false;
                this.isButtonAdd = true;
                this.menuFormAdd = {
                    type: 2,
                    parentId: this.menuForm.id,
                    level: Number(this.menuForm.level) + 1,
                    sortOrder: 0,
                    permissions: "",
                    status: '1',
                    icon: "md-open",
                    basic:'N'
                };
                this.menuModalVisible = true;
            },addButton() {
                if (this.menuForm.id == "" || this.menuForm.id == null) {
                    this.$Message.warning("请先点击选择一个菜单权限节点");
                    return;
                }
                this.parentTitle = this.menuForm.title;
                this.modalTitle = "添加菜单权限(可拖动)";
                this.showParent = true;
                if (this.menuForm.type !== 0&&this.menuForm.type !== 2) {
                    this.$Modal.warning({
                        title: "抱歉,不能添加",
                        content: "按钮不能添加子节点"
                    });
                    return;
                }
                this.isMenuAdd = false;
                this.isButtonAdd = true;
                this.menuFormAdd = {
                    type: 1,
                    parentId: this.menuForm.id,
                    level: Number(this.menuForm.level) + 1,
                    sortOrder: 0,
                    permissions: "",
                    status: '1',
                    icon: "md-open",
                    basic:'N'
                };
                this.menuModalVisible = true;
            },
            addRootMenu() {
                this.modalTitle = "添加一级菜单(可拖动)";
                this.isMenuAdd = true;
                this.isButtonAdd = false;
                this.showParent = false;
                this.menuFormAdd = {
                    type: 0,
                    level: 1,
                    sortOrder: 0,
                    status: '0',
                    icon: 'md-open',
                    basic:'N'
                };
                this.menuModalVisible = true;
            },
            changeSelect(v) {
                this.selectCount = v.length;
                this.selectList = v;
            },
            delAll() {
                if (this.selectCount <= 0) {
                    this.$Message.warning("您还未勾选要删除的数据");
                    return;
                }
                this.$Modal.confirm({
                    title: "确认删除",
                    content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
                    onOk: () => {
                        let ids = "";
                        this.selectList.forEach(function (e) {
                            ids += e.id + ",";
                        });
                        ids = ids.substring(0, ids.length - 1);
                        deletePermission(ids).then(res => {
                            if (res.code === "0000") {
                                this.$Message.success("删除成功");
                                util.initSystem(this);
                                this.selectList = [];
                                this.selectCount = 0;
                                this.cancelEdit();
                                this.init();
                            }
                        });
                    }
                });
            }
        },
        mounted() {
            this.init();
        }
    };
</script>
